<!--
 * @Author: LiYuan
 * @Date: 2021-04-08 16:36:02
 * @LastEditTime: 2021-04-14 10:55:07
 * @LastEditors: LiYuan
 * @Description: 
 * You build it, You run it.
-->
<template>
  <div class="multiple-card">
    <div class="button-group" v-if="allowCreate">
      <el-button type="primary" size="mini" @click="handleEvent('edit')">{{$t('customer.detail.taskCard.multipleCard.buttonGroup.add')}}</el-button>
    </div>

    <card-table
      :data="value.attribute"
      :columns="columns"
      :allow-edit="allowEdit"
      :allow-delete="allowDelete"
      @action="handleEvent"
    ></card-table>
    
    <base-modal :title="$t('common.base.detail')" :show.sync="visible" width="600px">
      <form-view :fields="cardInfo.fields" :value="currentValue"></form-view>
      <div slot="footer">
        <el-button @click="visible = false">{{$t('common.base.confirm')}}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
/* component */
import CardTable from './CardTable'
/* mixin */
import cardMixin from './CardMixin.js';
/* service */
import { isNotSupportedDisplayField } from '@service/FieldService'

export default {
  components: { CardTable },
  name: 'multiple-card',
  mixins: [cardMixin],
  props: {
    value: {
      type: Object,
      default: () => ({
        attribute: []
      })
    },
    // 表单操作模式
    formEditingMode: {
      type: String,
      default: '', // create | edit
    },
  },
  computed: {
    columns() {
      return [
        ...this.cardInfo.fields,
        {
          displayName: this.$t('common.base.operator'),
          fieldName: 'userName',
          minWidth: '80px'
        },
        {
          displayName: this.$t('common.label.operationTime'),
          fieldName: 'updateTime',
          minWidth: '160px'
        },
        {
          displayName: this.$t('common.base.table.col.operator'),
          fieldName: 'action',
          minWidth: '120px'
        }
      ].filter(field => !field.isHidden && (field.isVisible == undefined || field.isVisible) && !isNotSupportedDisplayField(field));
    }
  },
  data() {
    return {
      currentValue: {},
      visible: false
    }
  },
  methods: {
    handleEvent(action, data) {
      const value = { attribute: data || {} };
      if(action === 'view') {
        this.currentValue = value
        this.visible = true
      } else if (action === 'edit') {
        this.$emit('editCard', value)
      } else if (action === 'delete') {
        this.$emit('deleteCard', data.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.button-group {
  padding: 10px 0;
}
.form-view {
  padding: 5px 16px;
}
</style>